<template>
  <u-popup v-model="showPopup" mode="bottom" closeable safe-area-inset-bottom>
    <view class="box">
      <view class="item">
        <u-image class="item-img" width="144rpx" height="160rpx"
          :src="activity.bannerUrl? activity.bannerUrl+'&image_process=resize,w_144,h_160': ''"></u-image>
        <view class="item-info">
          <view class="item-title u-line-1">{{activity.activityName}}</view>
          <view class="item-tags">
            <text class="tag" v-for="(tag, index) in activity.activitySubRel && activity.activitySubRel.activityTags"
              :key="index">{{tag}}</text>
          </view>
          <view class="price"> <text class="sign">￥</text>{{activity.activityPrice}}</view>
        </view>
      </view>

      <!--   职神籍里报告案例支付 -->
      <template v-if="status == -1">
        <view class="des u-line-3">
          {{activity.activityIntroduce||''}}
        </view>
        <view class="footer">
          <view class="btn btn-position" @click="handleBuy">购买{{typeText}}</view>
        </view>
      </template>

      <!-- 非一览通会员 -->
      <template v-if="status == 0">
        <view class="des u-line-3">
          <view>{{activity.activitySubRel && activity.activitySubRel.activityIntroduce}}</view>
        </view>
        <view class="footer">
          <view class="btn btn-free" @click="handleFree"> <text class="icon icon-vip"></text> 免费看
            <view class="priceTips"></view>
          </view>
          <view class="btn btn-buy" @click="handleBuy">购买{{typeText}}</view>
        </view>
      </template>

      <!-- 初级会员 -->
      <template v-if="status == 1">
        <view class="des u-line-3">
          <view>尊贵的{{rightsInfo.yltLevelName}}，您可免费查看{{typeText}}<text
              class="high-light">{{rightsInfo.totalRightNumber}}</text>份，还剩<text
              class="high-light">{{rightsInfo.limitRightNumber || 0}}</text>份</view>
        </view>
        <view class="footer">
          <view class="btn btn-update" @click="handleUpdate">升级免费看</view>
          <view class="btn btn-buy" @click="handleBuy">购买{{typeText}}</view>
        </view>
      </template>

      <!-- 一览通（有权益数） -->
      <template v-if="status == 2">
        <view class="des u-line-3">
          尊贵的一览通{{rightsInfo.yltLevelName}}会员，您还拥有 <text
            class="high-light">{{rightsInfo.limitRightNumber || 0}}</text>份免费查看{{typeText}}权益
        </view>
        <view class="footer">
          <view class="btn btn-check" @click="handleCheck">查看{{typeText}}</view>
        </view>
      </template>

      <!-- 一览通（无权益数）最高级 -->
      <template v-if="status == 3">
        <view class="des u-line-3">
          尊贵的一览通{{rightsInfo.yltLevelName}}会员，您免费查看{{typeText}}权益数<text class="high-light">已使用完</text>~
        </view>
        <view class="footer">
          <view class="btn btn-buy" @click="handleBuy">购买{{typeText}}</view>
        </view>
      </template>

      <!-- 一览通（无权益数） -->
      <template v-if="status == 4">
        <view class="des u-line-3">
          尊贵的一览通{{rightsInfo.yltLevelName}}会员，您免费查看{{typeText}}权益数量<text class="high-light">已使用完</text>，升级可享受更多权益呦~
        </view>
        <view class="footer">
          <view class="btn btn-buy" @click="handleBuy">购买{{typeText}}</view>
          <view class="btn btn-update" @click="handleUpdate">升级</view>
        </view>
      </template>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    typeText: String,
    show: {
      type: Boolean,
      default: false,
    },
    status: {
      type: [String, Number],
      default: 0,
    },
    num: [String, Number],
    rightsInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    activity: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      showPopup: false,
    };
  },
  watch: {
    show(newVal) {
      this.showPopup = newVal;
    },
    showPopup(newVal) {
      if (this.show != newVal) this.$emit("update:show", newVal);
    },
  },
  methods: {
    handleFree() {
      this.$emit("free");
    },
    handleBuy() {
      this.$emit("buy");
    },
    handleUpdate() {
      this.$emit("update");
    },
    handleCheck() {
      this.$emit("check");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 68rpx 32rpx 32rpx 32rpx;

  .item {
    display: flex;

    &-img {
      flex-shrink: 0;
      margin-right: 28rpx;
      width: 144rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }

    &-info {
      flex: 1;
      width: 0;
    }

    &-title {
      margin-bottom: 16rpx;
      font-size: $uni-font-size-lg;
      font-weight: 500;
      color: #222222;
    }

    &-tags {
      .tag {
        display: inline-block;
        margin-right: 16rpx;
        margin-bottom: 10rpx;
        padding: 0rpx 12rpx;
        height: 38rpx;
        line-height: 38rpx;
        border-radius: 4rpx;
        font-size: $uni-font-size-min;
        color: #555555;
        background-color: #f5f5f5;
      }
    }

    .price {
      color: #ff3838;
      font-size: $uni-font-size-lg;

      .sign {
        font-size: $uni-font-size-sm;
      }
    }
  }

  .des {
    margin: 26rpx 0 38rpx 0;
    font-size: $uni-font-size-nor;
    color: #555555;

    .high-light {
      color: #ff7731;
    }
  }

  .footer {
    display: flex;

    .btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      color: #ffffff;

      &:nth-child(2) {
        margin-left: 30rpx;
      }
      &-free {
        position: relative;
        .priceTips {
          position: absolute;
          top: -19rpx;
          left: 50%;
          margin-left: -90rpx;
          width: 132rpx;
          height: 34rpx;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url($img-base + "ecenter/priceTips.png");
        }
      }
      &-free,
      &-update {
        color: #ffe0a1;
        background: linear-gradient(270deg, #38342b 0%, #413f3f 100%);
      }

      &-buy,
      &-check {
        background-color: #066bff;
      }
      &-check {
        background-image: url($img-base + "career/positionDictionary/job_description_newer_bottom_bg.webp");
        background-size: 100% 100%;
      }

      .icon-vip {
        margin: -6rpx 8rpx 0 0;
        width: 78rpx;
        height: 28rpx;
        background-image: url($img-base + "ecenter/vip-flag.png");
      }
    }
    .btn-position {
      background-image: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/job_description_newer_bottom_bg.webp");
      background-size: 100% 100%;
    }
  }
}
</style>